{% extends "common/layout_main.html" %}
{% block content %}
<div class="row  border-bottom">
    <div class="col-lg-12">
        <div class="tab_title">
            <ul class="nav nav-pills">
                <li class="current">
                    <a href="{{ url_for('food_page.index') }}">美食列表</a>
                </li>
                <li>
                    <a href="{{ url_for('food_page.category') }}">分类列表</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="row mg-t20 wrap_food_edit" style="">
    <div class="col-lg-12" style="">
        <h2 class="text-center">设置</h2>
        <div class="form-horizontal m-t" style="">
            <div class="form-group">
                <label class="col-lg-2 control-label">分类:</label>
                <div class="col-lg-10">
                    <select name="cate_id" class="form-control select2-hidden-accessible" tabindex="-1"
                            aria-hidden="true">
                        <option value="0">请选择分类</option>
                        {% for item in food_category_list %}
                            {% if item.id == food.category_id %}
                            <option selected value="{{ item.id }}">{{ item.name}} </option>
                            {% else %}
                            <option value="{{ item.id }}">{{ item.name}} </option>
                            {% endif %}
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-lg-2 control-label">名称:</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" placeholder="请输入名称" name="name" value="{{ food.name }}">
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-lg-2 control-label">价格:</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" placeholder="请输入售价" name="price" value="{{ food.price }}">
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-lg-2 control-label">封面图:</label>
                <div class="col-lg-10">
                    <div class="upload_pic_wrap">
                        <div class="upload_wrap pull-left">
                            <i class="fa fa-upload fa-2x"></i>
                            <input type="file" id="upload-pic" name="pic" accept="image/png, image/jpeg, image/jpg,image/gif">
                        </div>
                        <span class="pic-each">
                            <img src="/static/images/food/{{ food.main_image }}"/>
                            <span class="fa fa-times-circle del del_image"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group" style="">
                <label class="col-lg-2 control-label">描述:</label>
                <div class="col-lg-10">
                    <textarea  id="editor"  name="summary" style="width:100%;height: 50px;">{{ food.summary }}</textarea>
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-lg-2 control-label">库存:</label>
                <div class="col-lg-2">
                    <input type="text" name="stock" class="form-control" value="{{ food.stock }}">
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <label class="col-lg-2 control-label">标签:</label>
                <div class="col-lg-10">
                    <input type="text" class="form-control" name="tags" value="{{ food.tags }}">
                </div>
            </div>
            <div class="hr-line-dashed"></div>
            <div class="form-group">
                <div class="col-lg-4 col-lg-offset-2">
                    <input type="hidden" name="id" value="0">
                    <button class="btn btn-w-m btn-outline btn-primary save">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
<script>
    var wrap_food_edit = {
		init:function(){
            this.uploadPic();
            this.deletePic();
            this.submitForm();
		},
		uploadPic:function(){
            // 上传图片
            $(".wrap_food_edit .upload_pic_wrap input[name=pic]").change(function(){
                    var data=new FormData;
                    data.append("pic",document.getElementById("upload-pic").files[0]);
                    $.ajax({
                        url:"/food/upload-pic",
                        type:"POST",
                        dataType:"JSON",
                        data:data,
                        contentType: false,
                        processData: false,
                        success:function(res){
                            if(res.code == -1){
                                common_ops.alert(res.msg)
                            }
                            if(res.code == 200){
                                var html = '<img src="' + res.src + '"/>' + '<span class="fa fa-times-circle del del_image"></span>';
                                //只能上传一张照片
                                if ($(".upload_pic_wrap .pic-each").size() > 0) {
                                    wrap_food_edit.deleteFun()
                                    $(".upload_pic_wrap").append('<span class="pic-each">' + html + '</span>');
                                } else {
                                    $(".upload_pic_wrap").append('<span class="pic-each">' + html + '</span>');
                                }
                                // 当这个图标构建出来后绑定事件
                                wrap_food_edit.deletePic();
                            }
                        }
                    })
            })
		},

        deleteFun:function(){
            var img_path = $(".upload_pic_wrap .pic-each img").attr("src");
            $(".wrap_food_edit .del_image").parent().remove();
            $.ajax({
                    url:"/food/delete-pic",
                    type:"POST",
                    data:{"img_path":img_path},
                    dataType:"JSON",
                    success:function(res){
                        if(res.code==-1){
                            common_ops.alert(res.msg)
                        }
                    }
            })
        },
        // 删除图片
        deletePic:function(){
            $(".wrap_food_edit .pic-each .del_image").click(function(){
                wrap_food_edit.deleteFun()
            });
        },

        submitForm:function(){
            $(".wrap_food_edit .save").click(function () {
                var cate_id_target = $(".wrap_food_edit select[name=cate_id]");
                var cate_id = cate_id_target.val();

                var name_target = $(".wrap_food_edit input[name=name]");
                var name = name_target.val();

                var price_target = $(".wrap_food_edit input[name=price]");
                var price = price_target.val();

                var summary_target = $(".wrap_food_edit textarea[name=summary]");
                var summary = summary_target.val();

                var stock_target = $(".wrap_food_edit input[name=stock]");
                var stock = stock_target.val();

                var tags_target = $(".wrap_food_edit input[name=tags]");
                var tags = tags_target.val();

                if (parseInt(cate_id) < 1) {
                    common_ops.tip("请选择分类!", cate_id_target);
                    return;
                }

                if (name.length < 1) {
                    common_ops.alert("请输入符合规范的名称!");
                    return;
                }

                if (price == "" || parseFloat(price) <= 0) {
                    common_ops.tip("请输入符合规范的售卖价格!", price_target);
                    return;
                }

                if ($(".wrap_food_edit .pic-each").size() < 1) {
                    common_ops.alert("请上传封面图!");
                    return;
                }

                if (summary.length < 10) {
                    common_ops.tip("请输入描述，并不能少于10个字符!", summary_target);
                    return;
                }

                if (stock == "" || parseInt(stock) < 1) {
                    common_ops.tip("请输入符合规范的库存量!", stock_target);
                    return;
                }

                if (tags.length < 1) {
                    common_ops.alert("请输入标签，便于搜索!");
                    return;
                }


                var data = {
                    cate_id: cate_id,
                    name: name,
                    price: price,
                    img_path: $(".upload_pic_wrap .pic-each img").attr("src"),
                    summary: summary,
                    stock: stock,
                    tags: tags,

                };

                $.ajax({
                    url: "/food/edit?id={{ food.id }}",
                    type: 'POST',
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                        var callback = null;
                        if (res.code == 200) {
                            callback = function () {
                                window.location.href = "/food/index";
                            }
                        }
                        common_ops.alert(res.msg, callback);
                    }
                });

            });
        }
	}

    $(document).ready(function(){
        wrap_food_edit.init();
    })
</script>

{% endblock %}
